<template>
  <div>
    <!-- 修改密码 -->
    <div class="content">
      <br />
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
        label-position="top"
      >
        <div class="ml50">
          <el-form-item label="原始密码" prop="name">
            <el-input
              class="inp"
              v-model="ruleForm.name"
              placeholder="请输入原始密码"
            />
          </el-form-item>

          <el-form-item
            label="新密码（不少于6位，且不可与之前设置过的密码重复）"
            prop="newpasword"
            class="mt40"
          >
            <el-input
              class="inp"
              v-model="ruleForm.newpasword"
              placeholder="请输入密码（不少于6位）"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="ackname" class="mt40">
            <el-input
              class="inp"
              v-model="ruleForm.ackname"
              placeholder="请再次输入密码"
            />
          </el-form-item>

          <div class="mt69 one">初次设置密码</div>
          <el-form-item label="密码（不少于6位）" prop="namec" class="mt10">
            <el-input
              class="inp"
              v-model="ruleForm.namec"
              placeholder="请输入密码（不少于6位）"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="namecon" class="mt40">
            <el-input
              class="inp"
              v-model="ruleForm.namecon"
              placeholder="请再次输入密码"
            />
          </el-form-item>
        </div>

        <div class="footer">
          <el-button @click="resetForm(ruleFormRef)" class="btn"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="btnc"
            @click="submitForm(ruleFormRef)"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import "../../assets/com/com.scss";
interface RuleForm {
  name: string;
  newpasword: string;
  ackname: string;
  namec: string;
  namecon: string;
}
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  newpasword: "",
  ackname: "",
  namec: "",
  namecon: "",
});
// 正则
const rules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入原始密码", trigger: "blur" }],

  newpasword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    { min: 6, max: 12, message: "请输入密码（不少于6位）", trigger: "blur" },
  ],

  ackname: [{ required: true, message: "请再次输入密码", trigger: "blur" }],

  namec: [
    { required: true, message: "请输入密码（不少于6位）", trigger: "blur" },
  ],

  namecon: [{ required: true, message: "请再次输入密码", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style lang="scss" scoped>
.content {
  // width: 1610px;
  height: 940px;
  background: #ffffff;
  .demo-ruleForm {
    margin: 50px 0 0 0;
  }
  .one {
    width: 84px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #ff4848;
  }
  .footer {
    margin-top: 220px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
